<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>事件的绑定</p>
        <!-- <p v-on:click="test1">点我试试</p> 这样也可以 -->
        <p v-on:click="test2">点我试试</p> 
        <p>{{ sum(100,200)}}</p>  
        <!-- 直接显示300 也就是函数执行后的结果 -->
        <p >{{sum(666,111)}}</p>
        <p @click="sum(666,111)">点我看看 只能拿到返回值不会显示在上面</p>
        <p @click="handler">点击</p>
        <p >{{datas}}</p>

    </div>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script>
        
        const {createApp} = Vue;


        createApp({
            data(){     // 数据区域
                return {
                    str:'tianxiang hello world',
                    // test1:function(){
                    //     console.log(999)
                    // }
                    datas:this.sum(10,20)
                }
        },
        methods:{   // 事件处理函数区域 
            test2(){
                console.log(333)
            },
            sum(a,b){
                return a+b;
            },
            handler(){
                console.log('我是handler函数')
                console.log(this); // 这个this代表vue的实例 
                // 这个地方用到 js高级 
                // 数据代理  内容   需要回去查看复习  
                console.log(this.str); // 这个this代表vue的实例 

            }
        }
    }).mount('#app')
    </script>
    <script>

        function Test(name,age){
            this.name = name;
            this.age = age

        }

        Test.prototype.handler = function(){
            console.log(this.name)
        }

        const f1 = new Test('fuxiang',19)
        f1.handler()
    </script>
</body>
</html>